<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京空气质量检测系统</title>
    <link rel="icon" href="icon/favicon.ico">
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/dayjs.min.js"></script>
</head>
<body>
<div id="root">

</div>
<script type="text/babel">
    class Index extends React.Component {
        state = {
            districtList: [],
            airQualityPage: {},
            lodded: false,
            disId: '',
            isSearch: false
        }
        // 初始化加载地区
        init = async () => {
            // 获取区域信息
            let resp = await axios.get('http://localhost:8080/aircheckSys/district/list');
            let result = resp.data;
            if (result.code === 200) {
                this.setState({districtList: result.data});
                sessionStorage.setItem("districtList",JSON.stringify(result.data) || JSON.stringify([]))
            }
        }

        // 分页获取
        getAirQualityPage = (pageNum = 1, pageSize = 5) => {
            let {disId} = this.state;
            if (disId === '') disId = -1;
            return (e) => {
                if (e != null) {
                    e.preventDefault();
                }
                axios.get(`http://localhost:8080/aircheckSys/airQualityIndex/listPage/${pageNum}/${pageSize}/${disId}`).then((resp) => {
                    if (resp.data.code === 200) {
                        this.setState({
                            airQualityPage: resp.data.data,
                            lodded: true
                        });

                        sessionStorage.setItem("airQualityList",JSON.stringify(resp.data.data.list) || JSON.stringify([]))
                    }
                })
            }
        }

        // 下拉列表改变
        selChangeHandler = (e) => {
            this.setState({disId: e.target.value})
        }
        // 搜索框点击回调
        submitHandler = async () => {
            this.getAirQualityPage()();
        }

        componentDidMount() {
            // 加载区域
            this.init();
            // 初次加载
            this.getAirQualityPage()();
        }

        render() {
            const {districtList, lodded} = this.state;
            return (
                <div className="all">
                    <h2 className="title">空气质量检测信息库</h2>
                    <div>
                        <span>按区域查询</span>&nbsp;&nbsp;
                        <select onChange={this.selChangeHandler}>
                            <option value="">不限</option>
                            {
                                districtList.map((obj, index) => {
                                    return <option key={obj.id} value={obj.id}>{obj.name}</option>
                                })
                            }
                        </select>&nbsp;
                        <button onClick={this.submitHandler}>查询</button>
                        &nbsp;&nbsp;&nbsp;
                        <a href="add.jsp">添加空气质量信息</a>
                    </div>
                    <div>
                        <table>
                            <thead>
                            <tr style={{backgroundColor: 'cornflowerblue'}}>
                                <th>序号</th>
                                <th>区域</th>
                                <th>检测时间</th>
                                <th>PM10数据</th>
                                <th>PM2.5数据</th>
                                <th>监测站</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                !lodded ? <tr>
                                        <th>加载中..</th>
                                    </tr> :
                                    this.state.airQualityPage.list.length == 0 ?
                                        <tr>
                                            <th style={{textAlign: 'center'}}>抱歉，暂无数据!</th>
                                        </tr> :
                                        this.state.airQualityPage.list.map((obj, index) => {
                                            return (
                                                <tr key={obj.id}
                                                    style={{backgroundColor: index % 2 != 0 ? 'greenyellow' : ''}}>
                                                    <td>{index + 1}</td>
                                                    <td>
                                                        {
                                                            <a href={`edit.html?id=${obj.id}`}>{obj.districtName}</a>
                                                        }
                                                    </td>
                                                    <td>{dayjs(obj.monitorTime).format('YYYY-MM-DD')}</td>
                                                    <td>{obj.pm10}</td>
                                                    <td>{obj.pm25}</td>
                                                    <td>{obj.monitoringStation}</td>
                                                </tr>
                                            )
                                        })
                            }
                            </tbody>
                        </table>
                        {
                            !lodded ? '' :
                                <div>
                                    {
                                        this.state.airQualityPage.pageNum !== 1 && this.state.airQualityPage.pages > 0 ?
                                            <a href="#" onClick={this.getAirQualityPage(1)}>首&nbsp;页&nbsp;&nbsp;</a> :
                                            <a href="#" style={{cursor: 'not-allowed', color: '#ccc'}}
                                               onClick={this.getAirQualityPage(1)}>首&nbsp;页&nbsp;&nbsp;</a>
                                    }
                                    {
                                        this.state.airQualityPage.pageNum !== 1 && this.state.airQualityPage.pages > 0 ?
                                            <a href="#"
                                               onClick={this.getAirQualityPage(this.state.airQualityPage.pageNum - 1)}>&lt;&lt;上一页&nbsp;&nbsp;|&nbsp;&nbsp;</a> :
                                            <a href="#" style={{cursor: 'not-allowed', color: '#ccc'}}
                                               onClick={this.getAirQualityPage(1)}>&lt;&lt;上一页 &nbsp;&nbsp;|&nbsp;&nbsp;</a>
                                    }
                                    {
                                        this.state.airQualityPage.pageNum !== this.state.airQualityPage.pages && this.state.airQualityPage.pages > 0 ?
                                            <a href="#"
                                               onClick={this.getAirQualityPage(this.state.airQualityPage.pageNum + 1)}>下一页&gt;&gt;&nbsp;&nbsp;|&nbsp;&nbsp;</a> :
                                            <a href="#" style={{cursor: 'not-allowed', color: '#ccc'}}
                                               onClick={this.getAirQualityPage(this.state.airQualityPage.pages)}>下一页&gt;&gt;&nbsp; &nbsp;|&nbsp;&nbsp;</a>
                                    }
                                    {
                                        this.state.airQualityPage.pageNum !== this.state.airQualityPage.pages && this.state.airQualityPage.pages > 0 ?
                                            <a href="#"
                                               onClick={this.getAirQualityPage(this.state.airQualityPage.pages)}>尾&nbsp;页&nbsp;&nbsp;</a> :
                                            <a href="#" style={{cursor: 'not-allowed', color: '#ccc'}}
                                               onClick={this.getAirQualityPage(this.state.airQualityPage.pages)}>尾&nbsp;页&nbsp;&nbsp;</a>
                                    }
                                    {
                                        <span>第{this.state.airQualityPage.pageNum}页 / 共{this.state.airQualityPage.pages}页 &nbsp;({this.state.airQualityPage.total}条)</span>
                                    }
                                </div>
                        }
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(<Index/>, document.getElementById("root"));
</script>
</body>
</html>